<template>
  <div class="container">
    <a-card
      class="general-card"
      :title="$t('menu.system.authorization-management')"
    >
      <a-space direction="vertical" size="large">
        <a-radio-group v-model="position" type="button">
          <a-radio value="menus">菜单</a-radio>
          <a-radio value="func">功能权限</a-radio>
          <a-radio value="resources">资源</a-radio>
          <a-radio value="data">可用组织</a-radio>
          <a-radio value="users">可用用户</a-radio>
        </a-radio-group>
      </a-space>
    </a-card>
    <DataPermissionAuthorization
      v-if="position === 'data'"
      ref="DataPermissionAuthorizationRef"
    ></DataPermissionAuthorization>
    <AvailableUserAuthorization
      v-if="position === 'users'"
      ref="AvailableUserAuthorizationRef"
    ></AvailableUserAuthorization>
    <MenuAuthorization
      v-if="position === 'menus'"
      ref="MenuAuthorizationRef"
    ></MenuAuthorization>
    <ResourcesAuthorization
      v-if="position === 'resources'"
    ></ResourcesAuthorization>
    <Functionalauthority v-if="position === 'func'" ref="functionalauthority">
    </Functionalauthority>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import ResourcesAuthorization from './components/resources-authorization/index.vue';
  import Functionalauthority from './components/functional-authority/index.vue';
  import DataPermissionAuthorization from './components/data-permission-authorization/index.vue';
  import MenuAuthorization from './components/menu-authorization/index.vue';
  import AvailableUserAuthorization from './components/available-user-authorization/index.vue';

  const position = ref('menus');
  // const functionalauthority = ref('right');
  // const MenuAuthorizationRef = ref('top');
  // const DataPermissionAuthorizationRef = ref('left');
</script>

<style scoped lang="less">
  .container {
    padding: 10px;
    .chart-list {
      flex-flow: row nowrap;
      justify-content: center;
    }
  }
</style>
